<template>
  <div id="nav">
    <router-link :to="item.to" :class="{active:item.to==Index}" v-for="(item,index) in path" :key="index">
      <span  :class="item.class" v-if="index!=2"></span>
      <span :class="item.class"  v-else>
      <van-badge :content="cartCount">
      </van-badge>
      </span>
<!--      <span :class="{bage:index==2}" v-if="index==2">{{cartCount}}</span>-->
      {{item.title}}
    </router-link>
  </div>
  <router-view/>
</template>
<script>
import {ref, reactive, watch, computed,onMounted} from 'vue'
import {useRoute} from 'vue-router'
import store from '@/store/index'
export default {
  setup() {
    const Index=ref('/home')
    const route=useRoute()
  const path=reactive([
     {to:'/home',title:'首页',class:"iconfont icon-shouye"},
    {to:'/category',title:'分类',class:"iconfont icon-fenlei"},
    {to:'/shopCart',title: '购物车',class:"iconfont icon-gouwuche"},
    {to:'/profile',title: '我的',class:"iconfont icon-wode"}
  ])
    watch(route,()=>{
      console.log(route.path)
      Index.value=route.path
    })
    const cartCount=computed(()=>{
      return store.state.cart.cartNum
    })
    onMounted(()=>{
      store.dispatch('updateCart')
    })
    return{
      Index,
      path,
      cartCount
    }
  }
}
</script>
<style lang="less" scoped>
#nav{
  background-color: #F6F6F6;
  height: 50px;
  font-size: 14px;
  text-align: center;
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  box-shadow: 0 -3px 1px rgba(100,100,100,0.1);
  align-items: center;
  vertical-align: text-top;
  z-index: 999;
}
a{
  flex: 1;
  flex-wrap: wrap;
  color:#2c3e50
}
.iconfont{
  display:block;
}
.active{
  color:red
}
::v-deep .van-badge--top-right{
  position: relative;
  top:0;
  right: 8px;
}
</style>
